<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人主页 - 红灯笼</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif;
        }

        body {
            background: #f5f5f5;
            color: #333;
            line-height: 1.4;
        }

        .container {
            max-width: 600px;
            margin: 0 auto;
            background: #fff;
        }

        .header {
            padding: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #fff;
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
        }

        .user-name {
            font-size: 18px;
            font-weight: 500;
        }

        .member-tag {
            background: #f8f4e9;
            color: #6d5b41;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
            margin-left: 8px;
        }

        .header-right {
            display: flex;
            gap: 16px;
        }

        .vip-card {
            background: linear-gradient(to right, #ffe8f0, #fff0f5);
            border-radius: 12px;
            padding: 16px;
            margin: 12px;
        }

        .vip-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .vip-title {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .vip-logo {
            width: 24px;
            height: 24px;
        }

        .vip-name {
            font-size: 16px;
            font-weight: bold;
            color: #333;
        }

        .vip-desc {
            font-size: 14px;
            color: #666;
        }

        .vip-more {
            color: #666;
            font-size: 14px;
        }

        .vouchers {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
        }

        .voucher {
            background: #fff;
            border-radius: 8px;
            padding: 12px;
            text-align: center;
        }

        .voucher-amount {
            color: #ff2d4b;
            font-size: 24px;
            font-weight: bold;
        }

        .voucher-name {
            font-size: 14px;
            margin-top: 4px;
        }

        .claim-button {
            background: #ff2d4b;
            color: white;
            border: none;
            width: 100%;
            padding: 12px;
            border-radius: 24px;
            font-size: 16px;
            margin-top: 16px;
            cursor: pointer;
        }

        .quick-actions {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            padding: 20px 12px;
            background: #fff;
            margin-top: 12px;
            text-align: center;
        }

        .action-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }

        .action-icon {
            width: 28px;
            height: 28px;
        }

        .action-name {
            font-size: 14px;
            color: #333;
        }

        .orders {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            padding: 20px 12px;
            background: #fff;
            margin-top: 12px;
            border-bottom: 8px solid #f5f5f5;
        }

        .section-title {
            font-size: 16px;
            font-weight: bold;
            padding: 16px;
            background: #fff;
        }

        .wallet-items {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            padding: 16px;
            background: #fff;
        }

        .wallet-item {
            text-align: center;
        }

        .wallet-amount {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 4px;
        }

        .wallet-label {
            font-size: 12px;
            color: #999;
        }

        .apps-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
            padding: 16px;
            background: #fff;
        }

        .app-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }

        .app-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
        }

        .app-name {
            font-size: 12px;
            color: #333;
            text-align: center;
        }

        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: #fff;
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            padding: 8px 0;
            border-top: 1px solid #eee;
        }

        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            color: #666;
            font-size: 12px;
        }

        .nav-item.active {
            color: #333;
        }

        .badge {
            position: absolute;
            background: #ff2d4b;
            color: white;
            font-size: 12px;
            padding: 2px 6px;
            border-radius: 10px;
            top: -5px;
            right: -5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <header class="header">
            <div class="user-info">
                <img src="avatar.jpg" alt="用户头像" class="avatar">
                <div>
                    <div class="user-name">
                        胡萝卜是兔...
                        <span class="member-tag">🥜 黑金会员</span>
                    </div>
                    <div style="color: #666; font-size: 14px;">个人主页 ></div>
                </div>
            </div>
            <div class="header-right">
                <span>客服</span>
                <span>设置</span>
            </div>
        </header>

        <section class="vip-card">
            <div class="vip-header">
                <div class="vip-title">
                    <img src="vip-logo.png" alt="VIP" class="vip-logo">
                    <span class="vip-name">红灯笼神会员</span>
                    <span class="vip-desc">吃喝玩乐都能用</span>
                </div>
                <span class="vip-more">更多福利 ></span>
            </div>

            <div class="vouchers">
                <div class="voucher">
                    <div class="voucher-amount">?</div>
                    <div class="voucher-name">红灯笼团购神券</div>
                </div>
                <div class="voucher">
                    <div class="voucher-amount">?</div>
                    <div class="voucher-name">酒店神券</div>
                </div>
                <div class="voucher">
                    <div class="voucher-amount">?</div>
                    <div class="voucher-name">休闲玩乐神券</div>
                </div>
            </div>

            <button class="claim-button">每日神券 免费领取</button>
        </section>

        <section class="quick-actions">
            <div class="action-item">
                <img src="star.png" alt="收藏" class="action-icon">
                <span class="action-name">收藏</span>
            </div>
            <div class="action-item">
                <img src="history.png" alt="浏览记录" class="action-icon">
                <span class="action-name">浏览记录</span>
            </div>
            <div class="action-item">
                <img src="redpacket.png" alt="红包卡券" class="action-icon">
                <span class="action-name">红包卡券</span>
            </div>
            <div class="action-item">
                <img src="coins.png" alt="红灯笼币" class="action-icon">
                <span class="action-name">红灯笼币</span>
                <span>474</span>
            </div>
        </section>

        <div class="section-title">订单</div>
        <section class="orders">
            <div class="action-item">
                <img src="order-all.png" alt="全部订单" class="action-icon">
                <span class="action-name">全部订单</span>
            </div>
            <div class="action-item">
                <img src="order-pending.png" alt="待收货/使用" class="action-icon">
                <span class="action-name">待收货/使用</span>
            </div>
            <div class="action-item">
                <img src="order-review.png" alt="待评价" class="action-icon">
                <span class="action-name">待评价</span>
            </div>
            <div class="action-item">
                <img src="order-refund.png" alt="退款售后" class="action-icon">
                <span class="action-name">退款售后</span>
            </div>
        </section>

        <div class="section-title">钱包 <span style="float: right; color: #666; font-size: 14px;">进入钱包 ></span></div>
        <section class="wallet-items">
            <div class="wallet-item">
                <div class="wallet-amount">7.1万</div>
                <div class="wallet-label">借钱</div>
                <div class="wallet-label">大约可借</div>
            </div>
            <div class="wallet-item">
                <div class="wallet-amount">50,000</div>
                <div class="wallet-label">查看卡额度</div>
                <div class="wallet-label">额度可取现</div>
            </div>
            <div class="wallet-item">
                <div class="wallet-amount">9.30元</div>
                <div class="wallet-label">我的账单</div>
                <div class="wallet-label">最近支付</div>
            </div>
            <div class="wallet-item">
                <div class="wallet-amount">10,000元</div>
                <div class="wallet-label">待激活(1)</div>
                <div class="wallet-label">我的报销额</div>
            </div>
        </section>

        <section class="apps-grid">
            <div class="app-item">
                <img src="restaurant.png" alt="红灯笼餐厅" class="app-icon">
                <span class="app-name">红灯笼餐厅</span>
                <span class="badge">外卖券</span>
            </div>
            <div class="app-item">
                <img src="cash.png" alt="天天领现金" class="app-icon">
                <span class="app-name">天天领现金</span>
            </div>
            <div class="app-item">
                <img src="fruits.png" alt="红灯笼果园" class="app-icon">
                <span class="app-name">红灯笼果园</span>
            </div>
            <div class="app-item">
                <img src="game.png" alt="寻道大千" class="app-icon">
                <span class="app-name">寻道大千</span>
            </div>
            <div class="app-item">
                <img src="redpacket-game.png" alt="全民种红包" class="app-icon">
                <span class="app-name">全民种红包</span>
            </div>
            <div class="app-item">
                <img src="puzzle.png" alt="团团爱消除" class="app-icon">
                <span class="app-name">团团爱消除</span>
                <span class="badge">领币</span>
            </div>
            <div class="app-item">
                <img src="game2.png" alt="团团赚" class="app-icon">
                <span class="app-name">团团赚</span>
            </div>
            <div class="app-item">
                <img src="pet.png" alt="动物联盟大作战" class="app-icon">
                <span class="app-name">动物联盟大作战</span>
            </div>
        </section>

        <nav class="bottom-nav">
            <div class="nav-item">
                <img src="home.png" alt="首页" class="action-icon">
                <span>首页</span>
            </div>
            <div class="nav-item">
                <img src="message.png" alt="消息" class="action-icon">
                <span>消息</span>
                <span class="badge">5</span>
            </div>
            <div class="nav-item">
                <img src="chat.png" alt="消息" class="action-icon">
                <span>消息</span>
            </div>
            <div class="nav-item">
                <img src="cart.png" alt="购物车" class="action-icon">
                <span>购物车</span>
            </div>
            <div class="nav-item active">
                <img src="me.png" alt="我的" class="action-icon">
                <span>我的</span>
            </div>
        </nav>
    </div>

    <script>
        // Add interactivity for buttons and navigation
        document.querySelector('.claim-button').addEventListener('click', function() {
            alert('领取成功！');
        });

        // Handle navigation item clicks
        document.querySelectorAll('.nav-item').forEach(item => {
            item.addEventListener('click', function() {
                document.querySelectorAll('.nav-item').forEach(nav => {
                    nav.classList.remove('active');
                });
                this.classList.add('active');
            });
        });

        // Add smooth scrolling
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    </script>
</body>
</html>